<template>
  <div>
    <button class="btn" @click="show = true">注销用户</button>
  </div>
  <ModelDialog v-show="show">
    <template #header>注销用户</template>
    <template #body>
      <div style="margin: .1667rem;font-size: .3rem;">你确定要注销吗?</div>
    </template>
    <template #footer>
      <button class="button" @click="deleteAccount">确定</button>
      <button class="button" @click="show = false">取消</button>
    </template>
  </ModelDialog>
</template>

<script setup>
import { reqDeleteUser } from '@/apis/user';
import ModelDialog from '@/components/ModelDialog.vue';
import userStore from '@/stores/modules/user';
import { ref } from 'vue';
let show = ref(false)

const deleteAccount = async () => {
  let res = await reqDeleteUser(userStore().userId)
  if (res.code === 200) {
    alert('注销成功')
    userStore().userLogout()
    //跳转到登录页面
    $router.push({ path: '/login' });
  }
}
</script>

<style lang="scss" scoped>
.btn {
  height: .6667rem;
  font-size: .4rem;
  color: #fff;
  background-color: #ff404e;
  margin: .1667rem;
  padding: 0 .15rem;
  line-height: .6667rem;
  border-radius: .5rem;
  border: .0167rem solid #ff404e;
  cursor: pointer;
}

.button {
  background-color: #bfb830;
  margin-left: .3333rem;
  border: none;
  border-radius: 20%;
  padding: .0833rem;
  color: #fff;
  cursor: pointer;
}
</style>